<template>
    <div class="search">
        <div id="allmap"></div>
        <div id="r-result">
        <!-- <van-panel
            v-for="item in parking"
            :key="item.parking_lot_name"
            :title="item.parking_lot_name"
            :desc="'剩余车位：'+item.realSpace+'个'"
            :status="item.len+'m'"
            @click="goMap"
        ></van-panel> -->
        <van-panel
            v-for="item in parking"
            :key="item.parking_lot_name"
            :title="item.parking_lot_name"
            :status="item.len+'m'"
            @click="goMap(item)"
        ></van-panel>
        </div>
    </div>
</template>
<script>
import { NavBar, Panel, Button, Dialog } from "vant";
export default {
    components: {
        [NavBar.name]: NavBar,
        [Panel.name]: Panel,
        [Button.name]: Button,
        [Dialog.name]: Dialog,
    },
    data() {
        return {
            url: this.$store.state.url,
            mapPointX: 0, 
            mapPointY: 0,
            totalResults: [],
            parking: []
        };
    },
    created() {
        // this.axios({
        //     method: "]",
        //     url: _this.url + "garage/info/queryList"
        // })
        // .then(res => {
        //     _this.parking = res.data.rows;
        //     for (let i = 0; i < _this.parking.length; i++) {
        //     _this.parking[i].len = Math.floor(Math.random() * 1000);
        //     if (_this.parking[i].realSpace == 0) {
        //         _this.parking.splice(i, 1);
        //         i--;
        //     }
        //     }
        //     _this.parking.sort((a, b) => {
        //     return a.len - b.len;
        //     });
        // })
        // .catch(err => {
        //     console.log(err);
        // });
    },
    methods: {
        setMap() {
            let _this = this;
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(119.306239, 26.075302);
            map.centerAndZoom(point, 10);
            var top_right_navigation = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                type: BMAP_NAVIGATION_CONTROL_SMALL
            });
            map.addControl(top_right_navigation);
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(
                function(r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                } else {
                    alert("failed" + this.getStatus());
                }
                },
                { enableHighAccuracy: true }
            );
            var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map }
            });
            local.search("停车场");
        },
        goMap(val) {
            console.log(val);
            const { longitude, latitude, parking_lot_name,  } = val
            Dialog.confirm({
                title: "是否跳转",
                message: "是否跳转到百度地图页面进行导航？"
            })
                .then(() => {
                window.location.href =
                `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${parking_lot_name}&output=html&src=webapp.baidu.openAPIdemo`
                    // `http://api.map.baidu.com/geocoder?coord=${longitude},${latitude}&title=我的位置&content=我的位置&output=html&src=webapp.baidu.openAPIdemo`;
                })
                .catch(() => {
            });
        },
        async getPark() { 
            try{ 
                console.log(123);
                const { data : res } = await this.$api.Parking.getParkingList({})
                if(res.code) return this.$message.error(res.msg)
                this.parking = res.result
                for(let v of this.parking) { 
                    v.len = Math.floor(Math.random() * 1000)
                }
            }catch(e){ 
                console.log(e);
            }

            // .then(res => {
            //     console.log(res);
                // _this.parking = res.data.rows;
                // for (let i = 0; i < _this.parking.length; i++) {
                // _this.parking[i].len = Math.floor(Math.random() * 1000);
                // if (_this.parking[i].realSpace == 0) {
                //     _this.parking.splice(i, 1);
                //     i--;
                // }
                // }
                // _this.parking.sort((a, b) => {
                //     return a.len - b.len;
                // });
            // })
            // .catch(err => {
            //     console.log(err);
            // });
        }
    },
    mounted() {
        this.$nextTick(this.setMap);
        this.getPark()
    }
};
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#allmap {
  width: 100%;
  height: 30%;
  position: fixed;
  top: 0;
}
#r-result {
  font-size: 0.12rem;
  height: 3rem;
}
</style>
